<template>
  <div class="container">
    <el-tree
      ref="treeRef"
      node-key="id"
      :data="data"
      highlight-current
      default-expand-all
      :props="{
        children: 'children',
        label: 'label'
      }"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ node, data }">
        <span v-if="!data.children" class="icon el-icon-menu"></span>
        <span class="icon" v-else @click.stop="handleIconClick(data)">
          <i v-if="isOpen(data)" class="el-icon-remove-outline"></i>
          <i v-else class="el-icon-circle-plus-outline"></i>
        </span>
        <span>{{ data.label }}</span>
      </div>
    </el-tree>
  </div>
</template>

<script>
/**
 * 需要绑定 node-key="id"
 */
export default {
  data() {
    return {
      action: true,
      data: [
        {
          id: 1,
          label: '顶层菜单',
          children: [
            {
              id: 11,
              label: '一级 1',
              children: [
                {
                  id: 111,
                  label: '二级 1-1',
                  children: [
                    {
                      id: 1111,
                      label: '三级 1-1-1'
                    }
                  ]
                }
              ]
            },
            {
              id: 12,
              label: '一级 2',
              children: [
                {
                  id: 122,
                  label: '二级 2-1',
                  children: [
                    {
                      id: 1222,
                      label: '三级 2-1-1'
                    }
                  ]
                },
                {
                  id: 123,
                  label: '二级 2-2',
                  children: [
                    {
                      label: '三级 2-2-1'
                    }
                  ]
                }
              ]
            },
            {
              id: 13,
              label: '一级 3',
              children: [
                {
                  id: 133,
                  label: '二级 3-1',
                  children: [
                    {
                      id: 1333,
                      label: '三级 3-1-1'
                    }
                  ]
                },
                {
                  id: 134,
                  label: '二级 3-2',
                  children: [
                    {
                      id: 1344,
                      label: '三级 3-2-1'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    isOpen() {
      this.action
      return function (data) {
        return this.$refs.treeRef?.store.nodesMap[data.id].expanded
      }
    }
  },
  mounted() {
    // 触发一次更新
    this.action = !this.action
  },
  methods: {
    handleNodeClick(data) {
      console.log('🚀 - data:', data)
    },
    handleIconClick(data) {
      console.log('🚀 - data:', data)
      this.$refs.treeRef.store.nodesMap[data.id].expanded =
        !this.$refs.treeRef.store.nodesMap[data.id].expanded
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;
}

::v-deep .el-tree {
  .icon {
    margin: 0 5px 0 5px;
    font-size: 18px !important;
    color: #1989fa;
  }
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }

  .el-tree-node__children {
    padding-left: 25px;
  }

  .el-tree-node :last-child::before {
    height: 40px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before,
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 2px dotted #1989fa;
    bottom: 0px;
    height: 99%;
    top: -25px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 2px dotted #1989fa;
    left: 1px;
    height: 20px;
    top: 14px;
    width: 24px;
  }

  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }

  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}

::v-deep .el-tree > div {
  &::before,
  &::after {
    display: none;
  }
}
</style>
